<template>
  <epgis-nav-container title="注册">
    <template #container>
      
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
        <div class="layoutHorizontal layoutCenter" style="margin-top: 80px;">
          <img src="@/assets/icon/register/birthday.png"/>
        </div>
        <div class="layoutVerticle layoutCenter">
          <span style=" font-size: 16px; font-weight: bold; margin-top: 20px;">请选择你的生日</span>
          <span style="font-size: 14px; margin-top: 10px;">为你推荐年龄合适的{{recommentSex}}</span>
        </div>

        <div   class="layoutVerticle layoutCenter inputBorder" style=" margin-left: 25%;  margin-right: 25%; margin-top: 40px;font-size: 18px;">
          <van-field   @focus="selectBirthday" v-model="birthday"  :disabled = "isBirthdayDisabled" label="" type="textarea" rows="1" autosize="" placeholder="点击选择你的生日">
          </van-field>
        </div>

        <div @click="nextStep"  class="layoutVerticle layoutCenter " style="position: absolute;bottom: 68px; left: 0; right: 0; margin: 0 auto;">
          <img src="@/assets/icon/register/next.png"/>
        </div>
      </div>

      <van-popup v-model="isTimePopup" position="bottom">
        <van-datetime-picker 
          v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          title="选择生日"
          type="date"
          @confirm="confirmPopup"
          @cancel="isTimePopup=false"/>
      </van-popup>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { Toast, Notify } from "vant";
import { HeightArray, SuggestionStateEnum } from "@/views/mine/constants/PersonInformationConstants";


export default {
  components: {},
  data() {
    return {
      recommentSex:'',
      SEX_BOY:'1',
      SEX_GIRL:'2',
      birthday:'',
      isTimePopup:false,
      isBirthdayDisabled:false,
      registMsg:{},
      currentDate:null,
      minDate: new Date(1925,1,1),
      maxDate: new Date(),
    };
  },

  mounted() {

  },
  destroyed() {
  },
  activated() {
    this.registMsg = sessionStorage.getItem("registMsg");
    if(this.registMsg){
      this.registMsg = JSON.parse(this.registMsg);
    }
    var sex = this.registMsg['sex'];
    console.log("性别：" + sex);
    if(sex == this.SEX_BOY){
      console.log("性别：女生");
      this.recommentSex = '女生';
    } else if(sex == this.SEX_GIRL){
      this.recommentSex = '男生';
       console.log("性别：男生");
    }

  },
  methods: {

    nextStep() {
      if(this.checkValue()){
        this.registMsg['birthday'] = this.birthday;
        sessionStorage.setItem("registMsg",JSON.stringify(this.registMsg));
        this.$router.push({ name: 'RegisterCity' });
      }
    },

    checkValue(){
      if (!this.birthday) {
        Notify({
            type: "danger",
            message: "请选择你的生日",
        });
        return false;
      }
      return true;
    },


    confirmPopup(time) {
      this.birthday = this.$formatDate(time, "yyyy-MM-dd");
      this.isTimePopup = false
      console.log( this.birthday)

    },

    selectBirthday () {
      //禁止软键盘弹出
      document.activeElement.blur();
      this.isTimePopup = true;
      if(this.birthday ==''){
        this.currentDate = new Date(1999, 9, 1);
      }
    }

    






    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }
  .inputBorder{
    position: relative;
    padding: 8px 0px;
    &::after{
      position: absolute;
      box-sizing: border-box;
      content: '';
      pointer-events: none;
      bottom: 0%;
      border-bottom: 1px solid #ebedf0;
      width: 100%;
    }
    /deep/.van-field__control{
      font-size: 16px;
    }
  }

  /deep/.van-cell {
    padding: 0px 0px;
  }

  /deep/.van-field__control::-webkit-input-placeholder {
      color: #666666;
      font-weight: 600;
  }

  /deep/.van-field__control {
    text-align: center;
  }






</style>